<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 2.0.0-alpha 示例</title>

    <!-- 引入 Leaflet 2.0.0-alpha CSS -->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm@2.0.0-alpha/dist/leaflet.css">-->

<!--    &lt;!&ndash; 引入 Leaflet 2.0.0-alpha JS &ndash;&gt;-->
<!--    <script src="https://cdn.jsdelivr.net/npm/leaflet@2.0.0-alpha/dist/leaflet.js"></script>-->

<!--    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />-->
<!--    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>-->

    <script src="lib/leaflet/leaflet.js" ></script>
    <link href="lib/leaflet/leaflet.css" rel="stylesheet" />
    <style>
        #map {
            height: 500px;
            width: 100%;
            margin: 20px auto;
            border: 2px solid #ccc;
            border-radius: 8px;
        }
        body {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
<h1>Leaflet 2.0.0-alpha 地图示例</h1>
<div id="map"></div>

<script>
    // 初始化地图
   // const map = L.map('map').setView([51.505, -0.09], 13); // 伦敦中心坐标
    // initialize the map on the "map" div with a given center and zoom

    const map = new Map('map', {
        center: [51.505, -0.09],
        zoom: 13
    });
    // 添加OpenStreetMap图层
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 19
    }).addTo(map);

    // 添加标记（伦敦塔桥位置）
    const marker = L.marker([51.5055, -0.0754]).addTo(map);

    // 添加标记弹窗
    marker.bindPopup("<b>伦敦塔桥</b><br>著名的开启式桥梁").openPopup();
</script>
</body>
</html>